<template>
<div>
  <span class="px-1 vux-1px-l"></span>
  <span class="px-1 vux-1px-r"></span>
  <span class="px-1 vux-1px-t"></span>
  <span class="px-1 vux-1px-b"></span>
  <span class="px-1 vux-1px-tb"></span>
  <span class="px-1 vux-1px"></span>
</div>
</template>
<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
  .px-1{
    display:inline-block;
    margin-top:10px;
    height:50px;
    width:200px;
    background:green;
  }
  .vux-1px-l:before{
    border-color:red;
    transform:scaleX(2);
  }
  .vux-1px-r:after{
    border-color:red;
    transform:scaleX(2);
  }
  .vux-1px-t:before{
    border-color:red;
    transform:scaleY(2);
  }
  .vux-1px-b:after{
    border-color:red;
    transform:scaleY(2);
  }
  .vux-1px-tb{
    &:after,
    &:before{
      border-color:red;
      transform:scaleY(2);
    }
  }
  .vux-1px{
    &:before{
      left:-1px;
      top:-1px;
      border-color:red;
      transform:scale(0.5);
    }
  }

</style>



